<div class="p-3 relative">
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Basic form</div>
        <div class="card-body">
          <form role="form">
            <div class="form-group"><label>Email address</label> <input type="email" class="form-control" placeholder="Enter email"></div>
            <div class="form-group"><label>Password</label> <input type="password" class="form-control" placeholder="Password"></div>
            <div class="form-group">
              <label class="ui-checkbox"> <input type="checkbox" checked disabled> <i></i> Remember me </label>
            </div>
            <button type="submit" class="btn btn-sm btn-outline-primary rounded">提交</button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Horizontal form</div>
        <div class="card-body">
          <form class="bs-example form-horizontal">
            <div class="form-group row"><label class="col-lg-2 control-label">Email</label>
              <div class="col-lg-10"><input type="email" class="form-control" placeholder="Email"> <span class="help-block mb-0">Example block-level help text here.</span></div>
            </div>
            <div class="form-group row"><label class="col-lg-2 control-label">Password</label>
              <div class="col-lg-10"><input type="password" class="form-control" placeholder="Password"></div>
            </div>
            <div class="form-group row">
              <div class="offset-lg-2 col-lg-10">
                <div class="checkbox"><label class="ui-checkbox"><input type="checkbox" checked><i></i>Remember me</label></div>
              </div>
            </div>
            <div class="form-group row">
              <div class="offset-lg-2 col-lg-10">
                <button type="submit" class="btn btn-sm btn-outline-info rounded">Sign in</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">Inline form</div>
    <div class="card-body">
      <form class="form-inline" role="form">
        <div class="form-group mr-2">
          <label class="sr-only">Email address</label> <input type="email" class="form-control" placeholder="Enter email">
        </div>
        <div class="form-group mr-2">
          <label class="sr-only">Password</label> <input type="password" class="form-control" placeholder="Password">
        </div>
        <div class="form-group mr-2">
          <label class="ui-checkbox"><input type="checkbox" checked><i></i>Remember me</label>
        </div>
        <button class="btn btn-outline-secondary rad-30 mr-2">Sign in</button>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Flat form</div>
        <div class="card-body">
          <form role="form">
            <div class="row row-gap-5">
              <div class="col-sm-6">
                <div class="form-group form-group-alt mb-2"><label>First name</label> <input type="text" class="form-control" placeholder="John"> <span></span></div>
              </div>
              <div class="col-sm-6">
                <div class="form-group form-group-alt mb-2"><label>Last name</label> <input type="text" class="form-control" placeholder="Doe"> <span></span></div>
              </div>
            </div>
            <div class="row row-gap-5">
              <div class="col-sm-12">
                <div class="form-group form-group-alt mb-2"><label>Address</label> <input type="text" class="form-control" placeholder="350 Fifth Avenue, 34th floor"> <span></span></div>
              </div>
            </div>
            <div class="row row-gap-5">
              <div class="col-sm-4">
                <div class="form-group form-group-alt mb-2"><label>Angular</label> <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select> <span></span></div>
              </div>
              <div class="col-sm-4">
                <div class="form-group form-group-alt mb-2"><label>NodeJS</label> <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select> <span></span></div>
              </div>
              <div class="col-sm-4">
                <div class="form-group form-group-alt mb-2"><label>Backbone</label> <input type="number" class="form-control" placeholder="1-5"> <span></span></div>
              </div>
            </div>
            <div class="row row-gap-5">
              <div class="col-sm-12">
                <div class="form-group form-group-alt m-0"><label>Comment</label> <textarea class="form-control" placeholder="your comment here" style="height:70px;"></textarea> <span></span></div>
              </div>
            </div>
            <div class="form-group mt-3">
              <label class="ui-checkbox"> <input type="checkbox"> <i></i> I agree </label>
              <button type="submit" class="btn btn-sm btn-outline-primary rounded-circle float-right">提交</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Flat form alternative</div>
        <div class="card-body">
          <form role="form">
            <div class="form-group-alt-attached">
              <div class="row">
                <div class="col-sm-6 col-sm-6">
                  <div class="form-group form-group-alt"><label>First name</label> <input type="text" class="form-control" placeholder="John"> <span></span></div>
                </div>
                <div class="col-sm-6 col-sm-6">
                  <div class="form-group form-group-alt"><label>Last name</label> <input type="text" class="form-control" placeholder="Doe"> <span></span></div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group form-group-alt"><label>Address</label> <input type="text" class="form-control" placeholder="350 Fifth Avenue, 34th floor"> <span></span></div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4 col-sm-4">
                  <div class="form-group form-group-alt"><label>Angular</label> <input type="number" class="form-control" placeholder="1-5"> <span></span></div>
                </div>
                <div class="col-sm-4 col-sm-4">
                  <div class="form-group form-group-alt"><label>NodeJS</label> <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select> <span></span></div>
                </div>
                <div class="col-sm-4 col-sm-4">
                  <div class="form-group form-group-alt"><label>Backbone</label> <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select> <span></span></div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group form-group-alt"><label>Comment</label> <textarea class="form-control" placeholder="your comment here" style="height:70px;"></textarea> <span></span></div>
                </div>
              </div>
            </div>
            <div class="form-group mt-3">
              <label class="ui-checkbox"> <input type="checkbox"> <i></i> I agree </label>
              <button type="submit" class="btn btn-sm btn-outline-primary rounded-circle float-right">提交</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Bootstrap Line form</div>
        <div class="card-body p-2">
          <form role="form">
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-6">
                <div class="form-group"><label>First name</label> <input type="text" class="form-control form-control-line" placeholder="Jonh"></div>
              </div>
              <div class="col-sm-6">
                <div class="form-group"><label>Last name</label> <input type="text" class="form-control form-control-line" placeholder="Doe"></div>
              </div>
            </div>
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-12">
                <div class="form-group"><label>Address</label> <input type="text" class="form-control form-control-line" placeholder="350 Fifth Avanue"></div>
              </div>
            </div>
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-4">
                <div class="form-group"><label>NodeJS</label> <select class="form-control form-control-line">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select></div>
              </div>
              <div class="col-sm-4">
                <div class="form-group"><label>AngularJS</label> <select class="form-control form-control-line">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select></div>
              </div>
              <div class="col-sm-4">
                <div class="form-group"><label>JQuery</label> <input type="number" class="form-control form-control-line" placeholder="1-5"></div>
              </div>
            </div>
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-12">
                <div class="form-group m-0"><label>Comment</label> <textarea class="form-control form-control-line" placeholder="your comment here" style="height:70px;"></textarea></div>
              </div>
            </div>
            <div class="form-group mt-3">
              <label class="ui-checkbox"> <input type="checkbox"> <i></i> I agree </label>
              <button type="submit" class="btn btn-sm btn-outline-primary rounded-circle float-right">提交</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Material form</div>
        <div class="card-body p-2">
          <form role="form">
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-6">
                <div class="md-form-group md-float-label"><input class="md-input"> <label>First name</label></div>
              </div>
              <div class="col-sm-6">
                <div class="md-form-group md-float-label"><input class="md-input"> <label>Last name</label></div>
              </div>
            </div>
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-12">
                <div class="md-form-group md-float-label"><input class="md-input"> <label>Address</label></div>
              </div>
            </div>
            <div class="row row-gap-10 mb-3">
              <div class="col-sm-4">
                <div class="md-form-group md-float-label">
                  <select class="md-input">
                    <option></option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select> <label>NodeJS</label></div>
              </div>
              <div class="col-sm-4">
                <div class="md-form-group md-float-label">
                  <select class="md-input">
                    <option></option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select> <label>AngularJS</label></div>
              </div>
              <div class="col-sm-4">
                <div class="md-form-group md-float-label">
                  <select class="md-input">
                    <option></option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select> <label>Jquery</label></div>
              </div>
            </div>
            <div class="row row-gap-10">
              <div class="col-sm-12">
                <div class="md-form-group md-float-label">
                  <textarea class="md-input" style="height:200px;"></textarea> <label>Comment</label></div>
              </div>
            </div>
            <div class="form-group">
              <label class="md-checkbox"> <input type="checkbox"> <i class="bg-primary"></i> Agree </label>
              <button class="btn btn-outline-secondary btn-sm float-right"> 提交</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
